<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="80"
    label-position="top"
  >
    <el-row class="w-full" :gutter="10">
      <el-col :span="12">
        <el-form-item label="平台" prop="platform_id">
          <SelectPlatform
            class="w-full"
            v-model="form.platform_id"
            @change="changePlatform"
          />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="语言" prop="language_id">
          <SelectLanguage
            class="w-full"
            v-model="form.language_id"
            @change="changeLanguage"
          ></SelectLanguage>
        </el-form-item>
      </el-col> -->
      <el-col :span="24">
        <el-form-item label="优化要求">
          <el-input
            v-model="form.optimization_requirement"
            placeholder="若无特殊要求，则由AI 自主优化"
          />
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="标题" required>
          <el-input v-model="form.title" :rows="2" type="textarea" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="要点" required>
          <el-input
            v-model="form.key_word"
            :rows="2"
            type="textarea"
            placeholder="一行一个，回车换行，最多五十个；若无则默认取标题关键词"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="商品描述" required>
          <el-input
            v-model="form.description_key"
            :rows="5"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script name="CopyGeneration" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import SelectPlatform from "@/components/SelectPlatform";
import SelectLanguage from "@/components/Selects/SelectLanguage";

const data = reactive({
  form: {},
  rules: {
    platform_id: [{ required: true, message: "请选择平台" }],
  },
});

const { form, rules } = toRefs(data);

// 选择平台
const changePlatform = (val) => {
  form.value.platform_name = val;
};

// 选择语言
const changeLanguage = (val) => {
  form.value.language_name = val;
};

const formRef = ref();
const emit = defineEmits(["submit"]);
const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (valid) {
      if (!form.value.title && !form.value.key_word && !form.value.description_key) {
        return ElMessage.error("标题、关键词、描述必须填写一项");
      }
      const userText = getFormData();
      emit("submit", {
        type: "V3",
        userText,
      });
    }
  });
};

const getFormData = () => {
  const preamble = `你是一位资深${form.value.platform_name}运营经理，\n请根据以下内容，帮我优化${form.value.platform_name}平台`;

  let preambleContentTypes = [];
  if (form.value.title) {
    preambleContentTypes.push("标题");
  }
  if (form.value.key_word) {
    preambleContentTypes.push("要点");
  }
  if (form.value.description_key) {
    preambleContentTypes.push("商品描述");
  }

  const preambleWithContentTypes =
    preamble + preambleContentTypes.join("、") + "，并给出优化理由\n";
  const dataParts = [preambleWithContentTypes];

  // 相关信息及要求
  const relevantInfoParts = [];
  let index = 1; // 初始化序号
  if (form.value.optimization_requirement) {
    relevantInfoParts.push(`优化要求: ${form.value.optimization_requirement}`);
  }

  if (form.value.title) {
    relevantInfoParts.push(`${index++}、标题：${form.value.title}`);
  }

  if (form.value.key_word) {
    relevantInfoParts.push(
      `${index++}、要点：${form.value.key_word.split("\n").join("\n")}`
    );
  }

  if (form.value.description_key) {
    relevantInfoParts.push(`${index++}、商品描述：${form.value.description_key}`);
  }

  if (relevantInfoParts.length > 0) {
    dataParts.push(relevantInfoParts.join("\n"));
  }
  // 最终拼接成完整的字符串
  const finalData = dataParts.join("\n");

  return finalData; // 如果有需要返回数据的地方
};

const reset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  init();
};

const init = () => {
  form.value = {};
};

onMounted(() => {
  init();
});

defineExpose({ submit, reset });
</script>
<style lang="scss" scoped></style>
